<template>
    <div class="info" :class="[posit?'posit':'']" v-if="listData.avatar">
        <img style="width:71px;height:71px;border-radius: 50%;margin-right:5px" :src="listData.avatar" alt />
        <div class="info-tit">
            <p>
                <span style="font-size:16px"></span>
                <span style="color:#EA7A2F">{{listData.teacher_name}}</span>
            </p>
            <p  style="color:#999">{{listData.introduction}}</p>
            
        </div>
        <div class="guan" @click="attenFun(listData.teacher_id)">{{listData.flag == 1 ?'关注':'取消关注'}}</div>
    </div>
</template>

<script>
export default {
    props: ['listData', 'posit'],
    data() {
        return {

        };
    },
    methods: {
        attenFun(iid) {

            this.$emit('attenFun', iid)
        }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.posit {
    position: absolute;
    top: 63px;
    left: 15px;
}

.info {
    width: 96vw;
    height: 144px;
    padding: 18px;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 20px;

    .info-tit {
        width: 500px;
        display: flex;
        flex-direction: column;

        p {
            margin: 3px 0;
        }
    }

    .guan {
        min-width: 62px;
        height: 35px;
        border-radius: 18px;
        padding: 0 10px;
        background: #f4f4f4;
        text-align: center;
        line-height: 35px;
    }
}
</style>
